<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,  user-scalable=no">

    <title>JOA腰椎功能评定表</title>

    <!--<link href="/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<link href="/css/font-awesome/css/font-awesome.css" rel="stylesheet">-->

    <!--<link href="/css/animate.css" rel="stylesheet">-->
    <!--<link href="/css/style.css" rel="stylesheet">-->
    <!--<link href="/css/ics/common.css" rel="stylesheet">-->


    <style>
        /*.table-a table{border:1px solid #000000}*/

        td {
            vertical-align: bottom;
        }

        #table_guage {
            width: 100%;
        }

        #table_guage hr {
            margin: 6.5px auto;
        }

    </style>


</head>

<body>
<form>

    <div style="font-size: 16px;height: 26px;margin-bottom: 26px;border-bottom: 1px solid #d0d0d0;">
        <label class="print-font16">评定内容</label>
    </div>
    <div class="hide">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="left" width="80px"><label style="font-size: 13px">陪同者</label></td>
                <td align="left"><input type="text" class="form-control" style="width: 200px" id="text_companion"/>
                </td>
            </tr>
        </table>

    </div>

    <!--<div class="view-page hide">-->
    <!--<table border="0" cellspacing="0" cellpadding="0">-->
    <!--<tr>-->
    <!--<td align="left" width="80px"><label style="font-size: 18px">陪同者</label></td>-->
    <!--<td align="left"><label id="span_companion" style="font-weight:normal;font-size: 18px"></label></td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--</div>-->

    <!--<table id="table_total" class="view-page table table-bordered hide" style="margin-top: 20px;font-size: 13px" border="1"-->
    <!--cellspacing="0" cellpadding="0">-->
    <!--<tr>-->
    <!--<td width="40%" align="center"><label>总分</label></td>-->

    <!--<td width="60%" align="center"><span class="span-total-score"></span></td>-->
    <!--</tr>-->

    <!--</table>-->

    <!--<div style="margin-bottom: 30px;font-size: 20px">-->
    <!--<label>评定内容</label>-->
    <!--</div>-->


    <div class="table-a" style="margin-top: 30px">
        <table id="table_guage" border="0" cellspacing="0" cellpadding="0">
        </table>
    </div>

    <div style="font-size: 16px;height: 26px;margin-top:26px;margin-bottom: 26px;border-bottom: 1px solid #d0d0d0;">
        <label class="print-font16">评定结果</label>
    </div>
    <table id="table_total_edit" class="table table-bordered" style="margin-top: 20px;font-size: 13px" border="1"
           cellspacing="0"
           cellpadding="0">
        <tr>

            <td width="40%" align="center"><span>总分</span></td>


            <td width="60%" align="center"><span class="span-total-score"></span></td>
        </tr>

    </table>


    <div class="edit-page hide" style="margin-top: 20px">
        <div class="col-sm-8 col-sm-offset-4">
            <button class="btn btn-white col-sm-3" type="button" onclick="myReset()">重置</button>
            <button class="btn btn-primary col-sm-3 col-sm-offset-1" onclick="submitGaugeResult()" type="button">提交
            </button>
        </div>
    </div>
</form>
</body>

<script>

    var totalScore = 0;

    var spanTotalScore = $(".span-total-score");


    var editPage = $(".edit-page");
    var viewPage = $(".view-page");

    var textCompanion = $("#text_companion");
    var spanCompanion = $("#span_companion");

    var gauge_groups = [''];

    var gauge_options = [
        ['腰痛', '腿痛或麻', '步行能力', '直腿抬高', '感觉障碍', '运动障碍', '卧位转身受限', '站立受限', '洗漱受限', '前倾站立受限', '坐1小时受限', '举物持物受限', '步行', '膀胱功能']
    ];

    var gauge_answers = [
        ['频发或持续性严重疼痛##频发静止痛或偶发严重疼痛##偶有轻痛##无',
            '频发或持续性严重疼痛##频发静止痛或偶发严重疼痛##偶有轻痛##无',
            '<100m有痛、麻、肌弱##<500m有痛、麻、肌弱##=>500m 有痛、麻、肌弱##正常',
            '<30º##30~70º##正常',
            '明显##轻度##无',
            '0~Ⅲ级##肌力Ⅳ级##肌力Ⅴ级',
            '重##轻##无',
            '重##轻##无',
            '重##轻##无',
            '重##轻##无',
            '重##轻##无',
            '重##轻##无',
            '重##轻##无',
            '正常##轻度失控##严重失控'
        ]
    ];

    builderQuestion();


    function builderQuestion() {

        var radioType2List = '洗澡&修饰&';
        var radioType3List = '进食&穿衣&控制大便&控制小便&用厕&上下楼&';
        var radioType4List = '床椅转移&平地行45米&';

        var index = 1;

        for (var i = 0; i < gauge_groups.length; i++) {
            for (var j = 0; j < gauge_options[i].length; j++) {

                if (j == 0 && gauge_groups[i] != '') {
                    //添加组标题
                    var groupTr =
                        "<tr><td  height='10px'></td></tr>" +
                        "<tr><td align='left' ><label>" + gauge_groups[i] + "</label></td></tr>";
                    $("#table_guage").append(groupTr);
                }


                var radio;

                if (j < 3) {
                    radio = '<table width="100%" border="0" cellspacing="0" cellpadding="0">' +
                        '<tr>' +
                        '<td  width="50%" align="left" id="td_' + i + '_' + j + '_0"></td>' +
                        '<td  width="50%" align="left" id="td_' + i + '_' + j + '_1"></td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td  width="50%" align="left" id="td_' + i + '_' + j + '_2"></td>' +
                        '<td  width="50%" align="left" id="td_' + i + '_' + j + '_3"></td>' +
                        '</tr></table>';
                } else {
                    radio = '<table width="100%" border="0" cellspacing="0" cellpadding="0">' +
                        '<tr>' +
                        '<td  width="25%" align="left" id="td_' + i + '_' + j + '_0"></td>' +
                        '<td  width="25%" align="left" id="td_' + i + '_' + j + '_1"></td>' +
                        '<td  width="25%" align="left" id="td_' + i + '_' + j + '_2"></td>' +
                        '<td  width="25%" align="left" id="td_' + i + '_' + j + '_3"></td>' +
                        '</tr></table>';
                }


                var selectTr = "<tr>" +
                    "<td align='left' style='font-size:13px' id='td_" + i + "_" + j + "'>" + (index++) + " ．" + gauge_options[i][j].trim() + "</td>" +
                    "</tr>" +
                    "<tr><td class='print-padding-left' style='padding-left: 5vw' id='td_select_" + i + "_" + j + "'>" +
                    "</td></tr>" + "<tr><td height='15px' class='print-height'><hr style='height:1px;border:none;border-top:1px dashed #d0d0d0;'/></td></tr>";

                $("#table_guage").append(selectTr);
                $("#td_select_" + i + "_" + j).append(radio);

                var answer = gauge_answers[i][j];
                var answerRadioOptions = answer.split('##');
                for (var k = 0; k < answerRadioOptions.length; k++) {
                    var radioOption = '<input type="radio" value="' + k + '" class="question-radio" onchange="changeSelect()" name="radio_' + i + '_' + j + '"/>' + answerRadioOptions[k] + '</label>';

                    if (gauge_options[i][j].trim() == '膀胱功能') {
                        var value = k * (-3);
                        radioOption = '<input type="radio" value="' + value + '" class="question-radio" onchange="changeSelect()" name="radio_' + i + '_' + j + '"/>' + answerRadioOptions[k] + '</label>';
                    }

                    $('#td_' + i + '_' + j + '_' + k).append(radioOption);
                }
            }
        }

//        if (editable == false) {
//            $(".question-radio").attr('disabled', 'disabled');
//        }
    }

    function changeSelect() {

        totalScore = 0;

        for (var i = 0; i < gauge_groups.length; i++) {
            for (var j = 0; j < gauge_options[i].length; j++) {
//                var value=$("#select_" + i + "_" + j).val();
                var value = $("input[name='radio_" + i + "_" + j + "']:checked").val();
                if (typeof(value) == "undefined") {
                    value = 0;
                }
                totalScore += parseInt(value);
            }
        }
        spanTotalScore.text(totalScore);


    }


    function setEditable(edit) {
        editPage.removeClass('hide');
        if (edit == true || edit == 'true') {
//            editPage.removeClass('hide');
//            viewPage.addClass('hide');
        } else {
            textCompanion.attr("disabled", true);
//            viewPage.removeClass('hide');
            editPage.addClass('hide');
            $(".question-radio").attr('disabled', 'disabled');
        }

    }

    function setGaugeResult(result) {
        for (var i = 0; i < gauge_groups.length; i++) {
            for (var j = 0; j < gauge_options[i].length; j++) {
                var questions = result.questions;
                for (var k = 0; k < questions.length; k++) {
                    if (questions[k].key.trim() == gauge_options[i][j].trim()) {
                        $("input[name='radio_" + i + "_" + j + "'][value=" + questions[k].value + "]").attr("checked", 'checked');
                    }
                }
            }
        }

        if (result.companion == null || result.companion == '') {
//            spanCompanion.text("无");
        } else {
            textCompanion.val(result.companion);
//            spanCompanion.text(result.companion);
        }

        spanTotalScore.text(result.total_score);
    }

    function getGaugeResult() {
        changeSelect();
        var gauge = {};

        gauge.total_score = totalScore;

        var questions = [];

        var index = 0;

//        if(textCompanion.val().trim()==null||textCompanion.val().trim()==''){
//            utils.msgError("请填写陪同者!");
//            return;
//        }

        for (var i = 0; i < gauge_groups.length; i++) {
            for (var j = 0; j < gauge_options[i].length; j++) {
                var questionKey = $("#td_" + i + "_" + j).html();
                questionKey = questionKey.split("．")[1].trim();

                var result = $("input[name='radio_" + i + "_" + j + "']:checked").val();
                if (typeof(result) == "undefined") {
//                    result = 0;
                    var noCheckedIndex = i * gauge_groups.length + j + 1;
                    utils.msgError("第" + (index + 1) + "个选项还未评估!");
                    $("input[name='radio_" + i + "_" + j + "']").focus();
                    return;
                }
                var question = {};
                question.key = questionKey;
                question.value = result;
                questions[index++] = question;
            }
        }

        gauge.questions = questions;

        gauge.companion = textCompanion.val().trim();
//        spanCompanion.text(gauge.companion);
        textCompanion.val(gauge.companion);
        debugAlert(gauge);
        return gauge;
    }


    function getCount() {
        spanTotalScore.text(null);
    }

</script>

</html>
